<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="common/include/commonEnv.jsp"%>

<!DOCTYPE html>
<html>
<head>
<title>웹앱 만들기</title>
<link rel='stylesheet' type='text/css' href='${ctxCssDir}/jquery/jquery.mobile-1.0a3.min.css'/>
<script type='text/javascript' src='${ctxJsDir}/jquery/jquery-1.4.4.min.js'></script>
<script type='text/javascript' src='${ctxJsDir}/jquery/jquery.mobile-1.0a3.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#swipeText').bind('swipe',function(){
		alert(1);
	});
});
</script>
</head>
<body> 
  <!-- Start of first page -->
  <div data-role="page" id="foo">
    <!-- /header -->
	<div data-role="header">
	  <h1>Foo</h1>
	</div>
	<!-- /content -->
	<div data-role="content">
	  <p><a href="#foo" data-rel="back">Back to Main</a></p>	
	  <p>I'm first in the source order so I'm shown as the page.</p>		
	  <p>View internal page called <a href="#bar">bar</a></p>
	  <p>View internal page called <a href="#bar" data-transition="flip">flip bar</a></p>
	  <p>View internal page called <a href="#baz" data-rel="dialog" data-transition="pop">baz</a> as a dialog.</p>	
	</div>
	<!-- /footer -->
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
  </div>

  <!-- Start of second page -->
  <div data-role="page" id="bar">
    <!-- /header -->
	<div data-role="header">
	  <h1>Bar</h1>
	</div>
	<!-- /content -->
	<div data-role="content">
	  <p>I'm first in the source order so I'm shown as the page.</p>
	  <p><span id="swipeText">swipe this</span></p>	
	  <p><a href="#foo" data-rel="back">Back to foo</a></p>	
	</div>
	<!-- /footer -->
	<div data-role="footer">
	  <h4>Page Footer</h4>
	</div>
  </div>
  
 <!-- Start of third page --> 
  <div data-role="page" id="baz"> 
	<div data-role="header"> 
	  <h1>Baz</h1>
	</div>
	<div data-role="content">	
	  <h2>Baz</h2>
	  <p>I'm the baz page, viewed as a dialog.</p>
	  <p><a href="#foo" data-rel="back">Back to foo</a></p>	
	</div> 
	<div data-role="footer">
	  <h4>Page Footer</h4>
	</div> 
  </div> 
</body>
</html>